<template>
	<div>
		<div class="title">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/task' }">任务管理</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/processTask/' + this.taskid }">任务处理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="xq">
			<div class="icon">
				<i class="el-icon-edit-outline"></i>
			</div>

			<b><span class="top">任务处理</span></b>
			<el-row>
				<el-col :span="24" style="text-align: right;">
					<el-button type="primary" @click="updateTask()">保存</el-button>
			
					<el-button type="primary" @click="commitTask()">提交</el-button>
				</el-col>
			</el-row>
		</div>


		<el-form :model="pojo" label-position="right" label-width="120px">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="任务名称">
						<el-input v-model="pojo.taskName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="任务编号">
						<el-input v-model="pojo.taskId"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="充电站名称">
						<el-select v-model="pojo.cid" placeholder="请选择">
							<el-option v-for="item in stationList" :key="item.id" :label="item.stationName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="充电站负责人">

						<el-select v-model="pojo.zid" placeholder="请选择">
							<el-option v-for="item in znameList" :key="item.id" :label="item.userName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="工作周期">

						<el-select v-model="pojo.workCycle" placeholder="请选择工作周期">
							<el-option label="日" value="日"></el-option>
							<el-option label="周" value="周"></el-option>
							<el-option label="月" value="月"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="任务类型">

						<el-select v-model="pojo.taskType" placeholder="请选择任务类型">
							<el-option label="抢修任务" value="抢修任务"></el-option>
							<el-option label="巡检任务" value="巡检任务"></el-option>
							<el-option label="消警任务" value="消警任务"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="开始时间">

						<el-date-picker v-model="pojo.startTime" type="datetime" placeholder="选择日期时间"
							value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="结束时间">
						<el-date-picker v-model="pojo.endTime" type="datetime" placeholder="选择日期时间"
							value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="执行人员">

						<el-select v-model="pojo.zid" placeholder="请选择">
							<el-option v-for="item in znameList" :key="item.id" :label="item.userName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="任务状态">
						<el-input v-model="pojo.status"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="任务说明">
						<el-input type="textarea" v-model="pojo.task" :rows="4"></el-input>
					</el-form-item>
					<el-form-item label="处理说明">
						<el-input type="textarea" v-model="pojo.instructions" :rows="4"></el-input>
					</el-form-item>
					<!-- <img width="100%" :src="dialogImageUrl" alt="" /> -->
					<el-form-item label="充电桩图片" prop="pojo.image" required>
						<!-- <img v-for="(path, index) in imagePaths" :key="index" :src="path" alt="Image" style="width: 100px; height: 100px; margin: 5px;"> -->
						<!-- <img width="50px" :src="pojo.image" alt="" /> -->
						 <div v-for="(path, index) in imagePaths" :key="index" style="display: inline-block; position: relative;">
						        <img :src="path" alt="Image" style="width: 100px; height: 100px; margin: 5px;">
						        <button @click="deleteImage(index)" style="position: absolute; top: 0; right: 0; background-color: red; color: white; border: none; cursor: pointer;">X</button>
						      </div>
						<el-upload ref="image" :file-list="chargerImagefileList" :action="chargerImageAction"
							:on-success="handleUploadSuccess" list-type="picture-card">
							<i class="el-icon-plus"></i>
							<div slot="tip" class="el-upload__tip">
			
							</div>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-row>

		


		</el-form>
	</div>





</template>

<script>
	import axios from 'axios';
	import {
		findTaskById,
		findZname,
		findStation,
		updateTask
	} from "@/api/task/Task"; // 确保此路径正确
	export default {
		data() {
			return {
				pojo: {},
				taskid: "",
				znameList: "",
				stationList: "",
				chargerImagefileList: [],
				chargerImageAction: "bdc/bdc/upload",
				imagePath: "",
				imagePaths: [],
			}
		},

		methods: {
			commitTask(){
				this.$router.push('/showProcessTask/' + this.taskid)
			},
			
			 deleteImage(index) {
			      const removedImagePath = this.imagePaths[index];
			
			      // 从前端状态中移除图片
			      this.imagePaths.splice(index, 1);
			
			      // 更新数据库中的图片信息
			
			      // 更新 pojo.images 字段
			      this.pojo.image = this.imagePaths.join(',');
				 
			    },

			handleUploadSuccess(response, file, fileList) {
				// 处理上传成功后的逻辑
				console.log('File uploaded successfully:', response);
				// this.pojo.image = response; // 将后端返回的文件路径保存到表单字段中


				const imagePath = response; // 假设 response 包含一个 path 属性

				// 将新的图片路径添加到 existingImages 中，并使用逗号分隔
				if (this.pojo.image) {
					this.pojo.image += `,${imagePath}`;
				} else {
					this.pojo.image = imagePath;
				}

			},



			findTaskById() {
				console.log(this.taskid);
				findTaskById(this.taskid).then(res => {
					this.pojo = res
					this.imagePaths = this.pojo.image.split(',').filter(path => path.trim() !== '');
					console.log(res)
				}).catch(error => {
					console.error("获取用户列表失败:", error);
				});
			},
			findZname() {
				findZname().then(res => {
					this.znameList = res
					console.log(res)
				}).catch(error => {
					console.error("获取用户列表失败:", error);
				});
			},
			findStation() {
				findStation().then(res => {
					this.stationList = res
					console.log(res)
				}).catch(error => {
					console.error("获取用户列表失败:", error);
				});
			},
			updateTask() {
				// 发送请求更新任务信息
				console.log("任务:", this.pojo);
				updateTask(this.pojo).then(res => {
					if (res.code == 200) {
						this.$message({
							message: '任务保存成功',
							type: 'success'
						});
						
						this.findTaskById()
					} else {
						this.$message.error('任务修改失败');
					}
				}).catch(error => {
					console.error("任务修改失败:", error);
					this.$message.error('任务修改失败');
				});
			}





		},
		created() {
			this.findZname()
			this.taskid = this.$route.params.id;
			this.findTaskById()
			this.findStation()


		}
	}
</script>

<style scoped>
	.title {
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 20px;
	}

	.top {
		font-size: 15px;
		margin-left: 50px;
	}

	.icon {
		width: 30px;
		height: 30px;
		background-color: skyblue;
		align-items: center;
		text-align: center;
		margin-bottom: -25px;
		font-size: 20px;
		margin-left: 0px;
	}

	.el-form-item__label {
		font-weight: bold;
		color: #606266;
	}

	.el-input,
	.el-select,
	.el-date-picker {
		width: 100%;
	}

	.xq {
		margin-left: 50px;
		margin-bottom: 20px;
	}

	.el-upload__tip {
		line-height: 1.2;
	}
</style>